import React, {memo, useEffect, useState} from 'react';
import CreateMusicListStyle from "./IndexStyle";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import {Button, Table} from "antd";
import {getHourMineSecondBySecond} from "../../../../utils/timeFormatting";
import {useNavigate} from "react-router-dom";
import {MusicCollect} from "../../../../interface/MusicCollectInterface";
import {getMusicByPageAPI} from "../../../../services/music";
import {getMusicCollectPageApi} from "../../../../services/musicCollect";
import SongSheetItem from "../../../../components/part/songSheetItem/SongSheetItem";
import {MusicInsertDTO} from "../../../../interface/MusicInterface";
import {format} from "../../../../utils/dateFormat";

type Props = {};
type TableDataType={
  musicName:string,
  musicSinger:string,
  musicAlbum:string,
  musicTimer:number,
};

export default memo(function CreateMusicList(props: Props) {
  const {Column} = Table;
  const navigate= useNavigate();
  const userId=localStorage.getItem("yf_gaduation_zzmusic_user_id") as string;
  /** 用户自己创建的歌单列表 */
  const [musicCollectList,setMusicCollectList]=useState<MusicCollect[]>([]);
  /** 用户自己创建的歌曲列表 */
  const [musicList,setMusicList]=useState<MusicInsertDTO[]>([]);


  /** 获取数据 */
  useEffect(()=>{
    getMusicCollectPageApi({createUserId:parseInt(userId)}).then((result:any)=>{
      setMusicCollectList(result.data.data.data);
      console.log(result);
    },(error)=>{
      console.log(error);
    });
    getMusicByPageAPI({createUserId:parseInt(userId)}).then((result:any)=>{
      console.log(result);
      setMusicList(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
  },[]);

  return (
    <CreateMusicListStyle>
      <div className="creator_center_btn_box">
        <Button
          className="creator_center_btn"
          style={{color:"black"}}
          onClick={()=>{navigate("/creatorcenter/createmusic")}}>
          上传音乐
        </Button>
        <Button
          className="creator_center_btn"
          style={{color:"black"}}
          onClick={()=>{navigate("/creatorcenter/createmusiccollect")}}>
          创建歌单
        </Button>
      </div>


      <UnitBox title="我发布的歌曲列表"
               isShowLine={true}
      >
        <>
          <Table dataSource={musicList}
              pagination={{defaultCurrent:1,defaultPageSize:5}}
          >
            <Column title="歌曲名称" dataIndex="musicId" key="musicId"
                    render={(_:any,record:MusicInsertDTO)=>{
                      return(<div className="music-name-td">
                        <span className="music-name">{record.name}</span>
                        <span className="music-btn music-play-btn iconfont">&#xe624;</span>
                        <span className="music-btn music-add-btn iconfont">&#xe84f;</span>
                        <span className="music-btn music-update-btn iconfont">&#xe8ac;</span>
                      </div>);
                    }}
            />
            <Column title="歌手" dataIndex="singerName" key="singerName"/>
            <Column title="专辑" dataIndex="albumName" key="albumName"/>
            <Column title="发布时间" dataIndex="sendTimer" key="sendTimer"
                    render={(_:any,record:MusicInsertDTO)=>{
                      return (<>{format(record.sendTimer)}</>)
                    }}
            />
          </Table>
        </>
      </UnitBox>

      <UnitBox title="我创建的歌单列表"
               isShowLine={true}
      >
        <div className="song-sheet-content">
          {musicCollectList.map((item, index)=>{
            return (<SongSheetItem
              id={item.musicCollectId}
              key={item.musicCollectId}
              songName={item.name}
              size={188}
              coverUrl={item.cover}
              releaseTime={item.createTimer}
            />)
          })}
        </div>
      </UnitBox>


    </CreateMusicListStyle>
  );
});
